<template>
  <div>
    <h2>学生信息管理系统</h2>
    <div>
      <button @click="getAllStudents">获取全部学生</button>
      <div v-if="students">
        <div v-for="student in students" :key="student.id">
          {{ student }}
        </div>
      </div>
    </div>
    <div>
      <input v-model="queryId" placeholder="输入学生ID">
      <button @click="getStudentById">查询学生</button>
      <div v-if="studentById">
        {{ studentById }}
      </div>
    </div>
    <div>
      <h3>添加学生</h3>
      <div>
        学号：<input v-model="newStudent.studentId">
      </div>
      <div>
        姓名：<input v-model="newStudent.name">
      </div>
      <div>
        班级：<input v-model="newStudent.className">
      </div>
      <div>
        电话：<input v-model="newStudent.telephone">
      </div>
      <div>
        QQ：<input v-model="newStudent.qq">
      </div>
      <button @click="addStudent">提交</button>
    </div>
    <div>
      <h3>修改学生</h3>
      <div>
        ID：<input v-model="updateStudent.id">
      </div>
      <div>
        姓名：<input v-model="updateStudent.name">
      </div>
      <div>
        班级：<input v-model="updateStudent.className">
      </div>
      <div>
        电话：<input v-model="updateStudent.telephone">
      </div>
      <div>
        QQ：<input v-model="updateStudent.qq">
      </div>
      <button @click="updateStudentInfo">更新</button>
    </div>
    <div>
      <h3>删除学生</h3>
      <input v-model="deleteId" placeholder="输入学生ID">
      <button @click="deleteStudent">删除</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "StudentPage",
  data() {
    return {
      students: null,
      queryId: null,
      studentById: null,
      newStudent: {
        studentId: '',
        name: '',
        className: '',
        telephone: '',
        qq: ''
      },
      updateStudent: {
        id: '',
        name: '',
        className: '',
        telephone: '',
        qq: ''
      },
      deleteId: null
    };
  },
  methods: {
    async getAllStudents() {
      try {
        const res = await axios.get("http://localhost:8081/Students");
        this.students = res.data;
      } catch (error) {
        console.error('获取失败:', error);
      }
    },

    async getStudentById() {
      if (!this.queryId) return;
      try {
        const res = await axios.get(`http://localhost:8081/student/${this.queryId}`);
        this.studentById = res.data;
      } catch (error) {
        console.error('查询失败:', error);
      }
    },

    async addStudent() {
      try {
        await axios.post("http://localhost:8081/student", this.newStudent);
        this.getAllStudents();
        this.newStudent = {};
      } catch (error) {
        console.error('添加失败:', error);
      }
    },

    async updateStudentInfo() {
      try {
        await axios.put("http://localhost:8081/student", this.updateStudent);
        this.getAllStudents();
      } catch (error) {
        console.error('更新失败:', error);
      }
    },

    async  deleteStudent(){
      axios.delete("http://localhost:8081/student", {
        params: {
          id: this.deleteId
        }
      }).then(resp => {
        console.log(resp);
      })
    }
  }
};
</script>